<template>
  <div>
    <el-table ref="multipleTable" :data="tableList" row-key="riskId" style="width: 100%" height="456" @select="handleSelectionChange" @select-all="handleSelectionAll">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column label="险种图片" align="center" prop="coverImgUrl" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <div class="table-img">
            <img :src="row.coverImgUrl" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="riskName" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span style="color: #082aff" @click="showDetail(row)">
            {{ row.riskName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="发送总次数" align="center" prop="sendNum" show-overflow-tooltip />
      <el-table-column label="创建人" align="center" prop="createBy" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span style="color: #082aff">{{ row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <NormalPagination :currentPage="query.pageNum" :pageSize="query.pageSize" :total="total" :pageSizeList="[10, 20, 30]" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    <div style="text-align: right; margin-top: 10px;">
      <el-button type="info" plain @click="selectCancelFn">取消</el-button>
      <el-button type="primary" @click="selectSureFn">确定</el-button>
    </div>
  </div>
</template>

<script>
import { riskList } from "@/api/communityOperating/insurance";

export default {
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
      currentSelectList: [],
    };
  },
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
  },
  mounted() {
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    this.riskList();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.tableList = [];
      this.total = 0;
      this.riskList()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.riskList()
    },
    // 查询
    riskList() {
      riskList(this.query).then((res) => {
        if (res.code === 200) {
          this.tableList = res.data.rows || [];
          this.tableList.forEach(element => {
            element.checked = false;
          })
          this.currentSelectList.length > 0 && this.tableList.forEach(element => {
            this.currentSelectList.forEach(item => {
              if (item.mediaType == 99 && element.riskId == item.id) {
                element.checked = true;
                this.$refs.multipleTable.toggleRowSelection(element, true);
              }
            })
          })
          this.total = res.data.total || 0;
        } else {
          this.total = 0;
          this.tableList = [];
        }
      });
    },
    handleSelectionChange(valList, newVal) {
      // console.log(valList, newVal)
      newVal.checked = !newVal.checked
      if (newVal.checked) {
        this.currentSelectList.push({
          name: newVal.riskName,
          id: newVal.riskId,
          coverUrl: window.globalConfig.IMAGE_API + newVal.coverImgUrl,
          mediaType: '99',
          materialType: '99',
          materialName: newVal.riskName,
          materialUrl: newVal.riskLink,
        })
      } else {
        this.currentSelectList.forEach((element, index) =>{
          if (newVal.mediaType == 99 && element.id == newVal.riskId)
            this.currentSelectList.splice(index, 1);
        })
      }
    },
    handleSelectionAll(valList) {
      // console.log(valList)
      if (valList.length > 0) {
        valList.forEach(element => {
          this.currentSelectList.push({
            name: element.riskName,
            id: element.riskId,
            coverUrl: window.globalConfig.IMAGE_API + element.coverImgUrl,
            mediaType: '99',
            materialType: '99',
            materialName: element.riskName,
            materialUrl: element.riskLink,
          })
        })

        let unique = []
        let arr = this.currentSelectList
        for (const item of arr) {
          const isDuplicate = unique.find((obj) => obj.id === item.id);
          if (!isDuplicate) {
            unique.push(item);
          }
        }
        this.currentSelectList = unique
      } else {
        this.tableList.forEach(element => {
          this.currentSelectList.forEach((item, index) => {
            if (item.mediaType == 99 && element.riskId == item.id){
              element.checked = false;
              this.currentSelectList.splice(index, 1);
            }
          })
        })
      }
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    selectSureFn() {
      this.$emit("confirm", this.currentSelectList);
      this.$refs.multipleTable.clearSelection();
    },
    // 查看详情
    showDetail(row) {
      this.$emit('view', row)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.table-img {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  padding-top: 10px;
  box-sizing: border-box;

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
</style>
